<template>
  <div class="test">
    <button @click="isShow = !isShow">toggle</button>
    <!-- https://animate.style/
      enter-active-class 设置进入的动画
      leave-active-class 设置离开的动画
    -->
    <transition
      enter-active-class="tada"
      leave-active-class="bounceOutRight"
    >
      <div
        v-if="isShow"
        class="animated"
      >
        显示隐藏
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: false
    }
  }
}
</script>
<style lang="scss" scoped>
@import url('../../node_modules/animate.css/animate.css');
</style>
